<template>
  <Dialog
    :title="title"
    :fullscreen="true"
    :model-value="visible"
    width="700px"
    maxHeight="380px"
    :before-close="closeForm"
  >
    <Form
      :schema="schema"
      :model="dept"
      @register="formRegister"
      label-width="120px"
      :isCol="false"
      :rules="rules"
    />
    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script>
import * as deptApi from '@/api/unit/dept'
import { HrItemDic } from '@/config/publicDic'
import { deptSelect } from '@/components/unit'
import { empInput } from '@/components/emp'
import { dictItem } from '@/components/base'
import { Form } from '@/components/Form'
import { Dialog } from '@/components/Dialog'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
const userStore = useUserStoreWithOut()
export default {
  name: 'EditDept',
  components: {
    Dialog,
    Form
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    parentId: {
      type: String,
      default: null
    },
    isUnit: {
      type: Boolean,
      default: false
    },
    deptId: {
      type: String,
      default: null
    },
    unitId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      HrItemDic,
      title: '新增部门',
      titleName: '',
      dept: {},
      schema: [],
      curUnitId: null,
      chioseUnitId: null,
      empTitle: null,
      source: null,
      rules: {
        DeptName: [
          {
            required: true,
            message: '部门/单位全称不能为空！',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 100,
            message: '部门/单位全称长度在 2 到 100 个字之间',
            trigger: 'blur'
          }
        ],
        LeaderId: [
          {
            required: true,
            message: '负责人不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    comId: () => {
      return userStore.comId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    formRegister,
    initScheme() {
      const list = [
        {
          field: 'DeptName',
          label: this.titleName + '全称',
          component: 'Input',
          componentProps: {
            maxlength: 100,
            placeholder: this.titleName + '全称'
          }
        },
        {
          field: 'ShortName',
          label: this.titleName + '简称',
          component: 'Input',
          componentProps: {
            maxlength: 50,
            placeholder: this.titleName + '简称'
          }
        },
        {
          field: 'ParentId',
          label: '所属上级',
          component: 'DeptSelect',
          componentProps: {
            isUnit: this.isUnit ? true : null,
            isChioseUnit: true,
            status: [0, 1, 2],
            placeholder: '所属上级'
          }
        },
        {
          field: 'DeptShow',
          label: '说明',
          component: 'Input',
          componentProps: {
            maxlength: 255,
            type: 'textarea',
            placeholder: '说明'
          }
        },
        {
          field: 'LeaderId',
          label: '负责人',
          component: 'EmpInput',
          componentProps: {
            unitId: this.chioseUnitId,
            placeholder: '选择负责人'
          }
        }
      ]
      if (!this.isUnit) {
        list.push({
          field: 'DeptTag',
          label: '部门分类',
          component: 'DicItem',
          componentProps: {
            multiple: true,
            dicId: HrItemDic.deptTag,
            placeholder: '选择部门分类'
          }
        })
      }
      this.schema = list
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      } else if (this.deptId) {
        this.setDept(data)
      } else {
        this.addDept(data)
      }
    },
    async setDept(data) {
      await deptApi.set(this.deptId, data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.closeForm(true)
    },
    async addDept(data) {
      data.IsUnit = this.isUnit
      data.CompanyId = this.comId
      await deptApi.add(data)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.closeForm(true)
    },
    async reset() {
      this.empTitle = '选择' + (this.isUnit ? '单位' : '部门') + '负责人'
      this.curUnitId = this.unitId
      if (this.deptId == null) {
        this.title = this.isUnit ? '新增单位' : '新增部门'
        this.titleName = this.isUnit ? '单位' : '部门'
        this.source = null
        this.dept = {
          ParentId: this.parentId == null ? this.unitId : this.parentId
        }
        this.chioseUnitId = this.unitId != null ? [this.unitId] : null
      } else {
        const data = await deptApi.get(this.deptId)
        if (data.ParentId === '0') {
          data.ParentId = null
        }
        this.source = data
        this.dept = data
        if (data.IsUnit) {
          this.curUnitId = data.ParentId
        } else {
          this.curUnitId = data.UnitId
        }
        this.titleName = data.IsUnit ? '单位' : '部门'
        this.title = (data.IsUnit ? '编辑单位:' : '编辑部门:') + data.DeptName
        this.chioseUnitId = data.UnitId != null ? [data.UnitId] : null
      }
      this.initScheme()
      formMethods.setValues(this.dept)
    },
    closeForm(isRefresh = false) {
      this.$emit('update:visible', false)
      this.$emit('close', isRefresh)
    },
    resetForm() {
      if (this.deptId == null) {
        this.dept = {}
      } else {
        this.dept = this.source
      }
      formMethods.setValues(this.dept)
    }
  }
}
</script>
